<template>
  <div class="provider-audit">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="provider-audit-body">

          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="systemName">
              <el-input v-model="form.systemName" clearable :maxlength="100" placeholder="请输入系统名称" />
            </el-form-item>

            <el-form-item prop="upStatus">
              <el-select v-model="form.upStatus" clearable placeholder="请选择审核状态">
                <el-option
                  v-for="(item, index) in dictOptions.interfaceUpStatus.slice(1)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" :loading="loading" :disabled="loading" @click="getTableData"> 查询 </el-button>
              <el-button :loading="loading" :disabled="loading" @click="resetBtn"> 重置 </el-button>
              <el-button v-permission="['PROVIDERAUDIT_PASS']" :loading="loading" :disabled="multipleSelection.length === 0" @click="passOrRefuseBtn('', 2)"> 通过 </el-button>
              <el-button v-permission="['PROVIDERAUDIT_REFUSE']" type="danger" :loading="loading" :disabled="multipleSelection.length === 0" @click="passOrRefuseBtn('', 3)"> 拒绝 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据 -->
          <FlexTable
            v-loading="loading"
            border
            :data="tableData"
            :columns="columnsOptions"
            @selection-change="handleSelectionChange"
          />

          <el-pagination
            :page-size="pagination.pageSize"
            :current-page.sync="pagination.pageNo"
            layout="prev, pager, next, jumper"
            :total="pagination.totalPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />

        </div>
      </div>
    </div>

    <!-- 服务详情 -->
    <el-dialog
      title="服务详情"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <!-- <el-form ref="form" :model="serviceDetail" label-width="130px">
        <el-form-item v-for="(item, index) in serviceItemList" :key="index" :label="item.label + ':'" required>
          {{ item.dictCode ?
            getDictText(item.dictCode, serviceDetail[item.prop]) :
            serviceDetail[item.prop] }}
        </el-form-item>
      </el-form> -->
      <el-table
        :data="serviceItemList"
        border
        :show-header="false"
        style="width: 100%"
      >
        <el-table-column
          width="120"
        >
          <template slot-scope="{ row }">
            {{ row.label }}:
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="{ row }">
            {{ row.dictCode ?
              getDictText(row.dictCode, serviceDetail[row.prop]) :
              serviceDetail[row.prop] }}
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUpCheckListApi, updateUpStatusApi } from '@/api/serviceManage/requestPartyServiceManage'
import dictMixin from '@/utils/mixins/dict'
export default {
  name: 'ProviderAudit',

  mixins: [
    dictMixin(['interface_type', 'interfaceUpStatus', 'interface_protocol'])
  ],

  data () {
    return {
      dialogVisible: false,
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '服务名称', prop: 'serviceName' },
        { label: '服务编号', prop: 'serviceCode' },
        { label: '关联系统', prop: 'systemName' },
        { label: '接口方式',
          customRender: scope => {
            return this.getDictText('interface_type', scope.row.interfaceType)
          }
        },
        { label: '发布人', prop: 'createUserName' },
        { label: '创建时间', prop: 'createTime' },
        { label: '发布时间', prop: 'upTime' },
        { label: '审核状态',
          notShow: this.manageType,
          customRender: scope => {
            return this.getDictText('interfaceUpStatus', scope.row.upStatus)
          }
        },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.detailBtn(scope.row)}> 详情 </el-button>,
              scope.row.upStatus == '1' &&
              <el-button vPermission={['PROVIDERAUDIT_PASS']} type='text' onClick={() => this.passOrRefuseBtn(scope.row, 2)}> 通过 </el-button>,
              scope.row.upStatus == '1' &&
              <el-button vPermission={['PROVIDERAUDIT_REFUSE']} type='text' class='text-del-btn' onClick={() => this.passOrRefuseBtn(scope.row, 3)}> 拒绝 </el-button>
            ]
          }
        }
      ],
      form: {
        systemName: '',
        upStatus: ''
      },
      // 分页相关
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      },
      // 表格选中数据
      multipleSelection: [],
      // 服务详情
      serviceDetail: {},
      serviceItemList: [
        { label: '服务名称', prop: 'serviceName' },
        { label: '服务编号', prop: 'serviceCode' },
        { label: '服务类型', prop: 'manageType' },
        { label: '关联系统', prop: 'systemName' },
        { label: '接口方式', prop: 'interfaceType', dictCode: 'interface_type' },
        { label: '接口地址', prop: 'interfaceAddress' },
        { label: '接口协议', prop: 'interfaceProtocol', dictCode: 'interface_protocol' }
      ]
    }
  },

  created () {
    this.getTableData()
  },

  methods: {
    // 表格选中数据
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    // 获取表格数据
    getTableData () {
      this.loading = true
      getUpCheckListApi({
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...this.form
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 详情按钮
    detailBtn (row) {
      this.dialogVisible = true
      this.serviceDetail = row
      this.serviceDetail.manageType = '提供方服务'
    },

    // 通过/拒绝按钮
    passOrRefuseBtn (row, val) {
      const flag = this.multipleSelection.every(item => {
        return item.upStatus == '1'
      })
      if (!flag) return this.$message.warning('不可修改已经审核过的数据')
      this.$confirm(`确定${val == 2 ? '通过' : '拒绝'}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateUpStatusApi({
          ids: row ? row.id.split(',') : this.multipleSelection.map(item => item.id),
          upStatus: val
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.$message.success(`${val == 2 ? '通过' : '拒绝'}成功`)
            this.getTableData()
          }
        })
      })
    },

    // 重置按钮
    resetBtn () {
      this.$refs.form.resetFields()
      this.getTableData()
    },

    // 分页操作
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNo = val
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
  .provider-audit {
    background: #F2F2F2;

    &-body {
      background: #fff;
      margin-top: 10px;
      padding: 20px;
      height: calc(100vh - 254px);
      overflow-y: auto;
    }
    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }

    ::v-deep .el-dialog__body {
      padding: 10px;
    }
    ::v-deep .el-dialog__footer {
      padding: 10px 20px !important;
    }
  }
</style>
